<template>
  <div>
    <template>
      <swiper :options="swiperOptions">
        <swiper-slide>
          <img class="w-100" src="../assets/7c0079da45d25bc3743721290130121d.jpeg" alt="" />
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="../assets/3740837123c25325c2a06ac18ff1490c.jpeg" alt="" />
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="../assets/ed50957b7326c68b3a9a4c339895d76b.jpeg" alt="" />
        </swiper-slide>
        <div class="swiper-pagination pagination-home" slot="pagination"></div>
      </swiper>
      <div class="bg-white mt-3">
        <div class="nav d-flex flex-wrap pt-3">
          <div class="nav-one d-flex ai-center flex-column mb-3 py-2" v-for="i in 10" :key="i">
            <i class="sprite sprite-news"></i>
            <div>爆料站</div>
          </div>
        </div>
        <div class="bg-light-1 d-flex jc-center py-2">
          <i class="sprite sprite-arrow mr-1"></i>
          <span class="fs-sm">收起</span>
        </div>
      </div>
    </template>
    <m-list-card title="新闻资讯" icon="Menu" :categories="news">
      <template #items="{category}">
        <div class="mt-3 ">
          <router-link tag="div" :to="`/articles/${item._id}`" v-for="(item, n) in category.newsList" :key="n"
            class="py-2 d-flex">
            <span class="text-info">[{{ item.categoryName }}]</span>
            <span class="px-1">|</span>
            <span class="flex-1 text-ellipsis pr-2">{{ item.name }}</span>
            <span class="text-gray-1">{{ item.created | date }}</span>
          </router-link>
        </div>
      </template>
    </m-list-card>

    <m-list-card title="英雄列表" icon="card-hero" :categories="heroes">
      <template #items="{category}">
        <div class="mt-3 d-flex flex-wrap" style="margin: 0 -0.5rem">
          <router-link tag="div" :to="`/heroes/${item._id}`" v-for="(item, n) in category.heroList" :key="n"
            class="p-2 text-center" style="width:20%">
            <img :src="item.avatar" class="w-100" alt="" />
            <div class="">{{ item.name }}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
    <p>aaaa</p>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  filters: {
    date (val) {
      return moment(val).format('MM/DD')
    }
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.pagination-home',
          type: 'bullets'
        },
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        loop: true
      },
      news: [],
      heroes: []
    }
  },
  methods: {
    async fetchCats () {
      const parent = await this.$http.get('/news/list')
      this.news = parent.data
    },
    async fetchHeroes () {
      const res = await this.$http.get('/heroes/list')
      this.heroes = res.data
    }
  },
  created () {
    this.fetchCats()
    this.fetchHeroes()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
.nav-one {
  width: 25%;
  border-right: 1px solid $border-color;
  &:nth-child(4n) {
    border-right: none;
  }
}
.card-header {
  border-bottom: 1px solid $border-color;
}
.pagination-home {
  text-align: right !important;
  .swiper-pagination-bullet {
    background-color: map-get($colors, 'white');
    padding: 0.3077rem;
    opacity: 1;
    &.swiper-pagination-bullet-active {
      background-color: map-get($colors, 'info');
    }
  }
}
</style>
